<template>
  <div class="home-index">
    <div :style="{ width: '100%', height: '100%', position: 'relative' }">
      <!-- <Search @toSearchClick="toSearchClick" placeholderText="搜索联赛"></Search> -->
      <Search placeholderText="搜索联赛"></Search>
      <div style="width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
        <span
          :style="{ fontSize: (32 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#000000', lineHeight: (24 / 96) + 'rem', marginLeft: (55 / 96) + 'rem', marginBottom: (31 / 96) + 'rem' }">我管理的联赛</span>
      </div>
      <div v-if="leagueList.length != 0">
        <league-list :leagueId="leagueId" :leagueList="leagueList" @leagueListClick="leagueListClick"></league-list>
        <div
          :style="{ width: '100%', marginTop: (104 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', position: 'absolute', bottom: (20 / 96) + 'rem' }">
          <pagination :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage"
            :page-size="pageSize" layout="total, prev, pager, next" :total="total">
          </pagination>
          <div :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
            <span
              :style="{ fontSize: (16 / 96) + 'rem', fontFamily: 'YouYuan', fontWeight: '400', color: '#999999', lineHeight: (24 / 96) + 'rem' }">共{{
              Math.ceil(total / pageSize) }}页</span>
          </div>
        </div>
      </div>
      <div v-if="leagueList.length == 0"
        style="width: 100%; height: 81%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
        <img :style="{ width: (396 / 96) + 'rem', height: (300 / 96) + 'rem', marginBottom: (30 / 96) + 'rem' }"
          src="../../../static/nodata.png" />
        <span
          :style="{ fontSize: (30 / 96) + 'rem', fontFamily: 'YouYuan', fontWeight: '400', color: '#999999', lineHeight: (24 / 96) + 'rem' }">暂无数据</span>
      </div>
    </div>
  </div>
</template>

<script>
  import { pageResize } from '../../utils/resetScreenSize.js'
  import LeagueList from '../../components/LeagueList'
  import Search from '../../components/Search'
  import MatchPage from '../MatchPage'
  import utils from '../../utils/common'
  import { Pagination } from 'element-ui';
  export default {
    name: 'LeaguePage',
    components: {
      LeagueList: LeagueList,
      Search: Search,
      MatchPage: MatchPage,
      Pagination: Pagination
    },
    data () {
      return {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        showFlag: false,
        leagueId: 0,
        leagueName: "",
        leagueList: [
          // {
          //   backgroundImg: "https://ydsg-1256672631.cos.ap-guangzhou.myqcloud.com/icon/defaultTeamLogo.png",
          //   logo: "https://ydsg-1256672631.cos.ap-guangzhou.myqcloud.com/icon/defaultTeamLogo.png",
          //   leagueImage: "https://ydsg-1256672631.cos.ap-guangzhou.myqcloud.com/icon/defaultTeamLogo.png",
          //   title: `2024年中堂镇篮球联赛村BA`,
          //   id: 95058
          // },
          // {
          //   backgroundImg: "https://ydsg-1256672631.cos.ap-guangzhou.myqcloud.com/icon/defaultTeamLogo.png",
          //   logo: "https://ydsg-1256672631.cos.ap-guangzhou.myqcloud.com/icon/defaultTeamLogo.png",
          //   leagueImage: "https://ydsg-1256672631.cos.ap-guangzhou.myqcloud.com/icon/defaultTeamLogo.png",
          //   title: "“体彩·向西杯”罗湖区业余篮球公开赛 社会组",
          //   id: 74581
          // }, {
          //   backgroundImg: "https://ydsg-1256672631.cos.ap-guangzhou.myqcloud.com/icon/defaultTeamLogo.png",
          //   logo: "https://ydsg-1256672631.cos.ap-guangzhou.myqcloud.com/icon/defaultTeamLogo.png",
          //   leagueImage: "https://ydsg-1256672631.cos.ap-guangzhou.myqcloud.com/icon/defaultTeamLogo.png",
          //   title: "“体彩·向西杯”罗湖区业余篮球公开赛 机关组",
          //   id: 74582
          // }
        ],
        isSearchType: false
      }
    },
    mounted () {
      pageResize();
    },
    methods: {
      toSearchClick (leagueName) {
        // if(leagueName) {
        // console.log("leagueName: ", utils.trim(leagueName));
        if (this.leagueName != utils.trim(leagueName)) {
          this.leagueName = utils.trim(leagueName);
          this.currentPage = 1;
        }
        this.isSearchType = true;
        // 接口调用
        let jsons = {
          page: this.currentPage - 1,
          size: this.pageSize,
          keyword: this.leagueName
        };
        this.$http.post("/league/searchVo", jsons).then((res) => {
          if (res.code == 0) {
            // console.log("res: ", res);
            let leagueList = [];
            for (let i = 0; i < res.data.content.length; i++) {
              leagueList.push({
                backgroundImg: res.data.content[i].backgroundImg,
                city: res.data.content[i].city,
                cityId: res.data.content[i].cityId,
                coOrganizer: res.data.content[i].coOrganizer,
                competitionCount: res.data.content[i].competitionCount,
                createDtm: res.data.content[i].createDtm,
                del: res.data.content[i].del,
                district: res.data.content[i].district,
                districtId: res.data.content[i].districtId,
                endTime: res.data.content[i].endTime,
                id: res.data.content[i].id,
                introduction: res.data.content[i].introduction,
                isHot: res.data.content[i].isHot,
                isOpenRegistrationChannel: res.data.content[i].isOpenRegistrationChannel,
                leagueCode: res.data.content[i].leagueCode,
                logo: res.data.content[i].logo ? res.data.content[i].logo : "../../static/league_match_logo.png",
                model: res.data.content[i].model,
                name: res.data.content[i].name,
                organizer: res.data.content[i].organizer,
                province: res.data.content[i].province,
                provinceId: res.data.content[i].provinceId,
                sponsor: res.data.content[i].sponsor,
                sportTypeId: res.data.content[i].sportTypeId,
                startTime: res.data.content[i].startTime,
                status: res.data.content[i].status,
                teamCount: res.data.content[i].teamCount,
                type: res.data.content[i].type,
                updateDtm: res.data.content[i].updateDtm,
                leagueImage: res.data.content[i].logo ? res.data.content[i].logo : "../../static/league_match_logo.png",
                title: res.data.content[i].name,
                leagueNum: res.data.content[i].teamCount ? res.data.content[i].teamCount : 0
              });
            }
            this.leagueList = leagueList;
            this.total = res.data.totalElements;
          } else {
            this.$toast(res.msg);
          }
        }).catch(e => {
          // console.log("e: ", e);
        });
        // }
      },
      leagueListClick (item) {
        if (null == this.$route.query.title || null == this.$route.query.leagueId) {
          this.$toast("请检查打开的链接地址，参数错误！请携带上对应的参数：title和leagueId");
        } else {
          this.showFlag = true;
          this.leagueId = parseInt(item.id);
          this.$router.push({ name: 'MatchPage', query: { leagueId: this.leagueId, title: item.title } })
          window.document.title = '联赛主页';
        }
      },
      goBackClick () {
        this.showFlag = false;
      },
      handleSizeChange (val) {
        // console.log(`每页 ${val} 条`);
      },
      handleCurrentChange (val) {
        // console.log(`当前页: ${val}`);
        this.currentPage = val;
        // 接口调用
        if (this.isSearchType) {
          this.toSearchClick(this.leagueName);
        }
        if (!this.isSearchType) {
          this.getLeagueLists(val);
        }
      },
      getLeagueLists (currentPage) {
        let jsons = {
          page: currentPage - 1,
          size: this.pageSize
        };
        this.$http.post('/league/pageVo', jsons).then((res) => {
          if (res.code == 0) {
            // console.log("res: ", res);
            let leagueList = [];
            for (let i = 0; i < res.data.content.length; i++) {
              leagueList.push({
                backgroundImg: res.data.content[i].backgroundImg,
                city: res.data.content[i].city,
                cityId: res.data.content[i].cityId,
                coOrganizer: res.data.content[i].coOrganizer,
                competitionCount: res.data.content[i].competitionCount,
                createDtm: res.data.content[i].createDtm,
                del: res.data.content[i].del,
                district: res.data.content[i].district,
                districtId: res.data.content[i].districtId,
                endTime: res.data.content[i].endTime,
                id: res.data.content[i].id,
                introduction: res.data.content[i].introduction,
                isHot: res.data.content[i].isHot,
                isOpenRegistrationChannel: res.data.content[i].isOpenRegistrationChannel,
                leagueCode: res.data.content[i].leagueCode,
                logo: res.data.content[i].logo ? res.data.content[i].logo : "../../static/league_match_logo.png",
                model: res.data.content[i].model,
                name: res.data.content[i].name,
                organizer: res.data.content[i].organizer,
                province: res.data.content[i].province,
                provinceId: res.data.content[i].provinceId,
                sponsor: res.data.content[i].sponsor,
                sportTypeId: res.data.content[i].sportTypeId,
                startTime: res.data.content[i].startTime,
                status: res.data.content[i].status,
                teamCount: res.data.content[i].teamCount,
                type: res.data.content[i].type,
                updateDtm: res.data.content[i].updateDtm,
                leagueImage: res.data.content[i].logo ? res.data.content[i].logo : "../../static/league_match_logo.png",
                title: res.data.content[i].name,
                leagueNum: res.data.content[i].teamCount ? res.data.content[i].teamCount : 0
              });
            }
            this.leagueList = leagueList;
            this.total = res.data.totalElements;
          } else {
            this.$toast(res.msg);
          }
        }).catch(e => {
          // console.log("e: ", e);
        });
      }
    },
    activated () {
      window.document.title = '大屏助手';
      this.leagueList = [
        {
          backgroundImg: "https://ydsg-1256672631.cos.ap-guangzhou.myqcloud.com/icon/defaultTeamLogo.png",
          logo: "https://ydsg-1256672631.cos.ap-guangzhou.myqcloud.com/icon/defaultTeamLogo.png",
          leagueImage: "https://ydsg-1256672631.cos.ap-guangzhou.myqcloud.com/icon/defaultTeamLogo.png",
          title: this.$route.query.title,
          id: this.$route.query.leagueId
        }
      ]
      // if(this.isSearchType) {
      //   this.toSearchClick(this.leagueName);
      // }
      // if(!this.isSearchType) {
      //   this.getLeagueLists(this.currentPage);
      // }
    }
  }
</script>

<style scoped>
  .father .child {
    display: none;
  }

  .father:hover .child {
    display: block;
  }

  .home-index {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .match-title-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .match-title {
    font-family: SimHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
  }
</style>